<div class="container">
    <div class="translation-card">
        <div class="language-selector mb-4">
            <div class="row w-100">
                <div class="col-5">
                    <select class="form-select" id="sourceLanguage">
                        <option value="zh">中文</option>
                        <option value="en">英语</option>
                        <option value="ja">日语</option>
                        <option value="ko">韩语</option>
                        <option value="fr">法语</option>
                    </select>
                </div>
                <div class="col-2 text-center">
                    <button class="btn btn-link" id="switchLanguage">
                        <i class="fas fa-exchange-alt"></i>
                    </button>
                </div>
                <div class="col-5">
                    <select class="form-select" id="targetLanguage">
                        <option value="en">英语</option>
                        <option value="zh">中文</option>
                        <option value="ja">日语</option>
                        <option value="ko">韩语</option>
                        <option value="fr">法语</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 语音输入区域 -->
        <div class="voice-input-area text-center mb-4">
            <div class="voice-status mb-3">
                <i class="fas fa-microphone fa-3x"></i>
                <p class="mt-2" id="voiceStatus">点击麦克风开始录音</p>
            </div>
            <button class="btn btn-lg btn-primary rounded-circle p-4" id="recordButton">
                <i class="fas fa-microphone"></i>
            </button>
        </div>

        <!-- 实时语音识别结果 -->
        <div class="recognition-result mb-4">
            <div class="card">
                <div class="card-header">
                    语音识别结果
                </div>
                <div class="card-body">
                    <p id="recognitionText" class="mb-0">等待语音输入...</p>
                </div>
            </div>
        </div>

        <!-- 翻译结果 -->
        <div class="translation-result bg-light p-3 rounded mb-4" style="display: none;">
            <h6 class="mb-3">翻译结果</h6>
            <div class="result-text mb-3"></div>
            <div class="d-flex justify-content-between">
                <button class="btn btn-outline-secondary btn-sm" id="copyResult">
                    <i class="fas fa-copy"></i> 复制
                </button>
                <button class="btn btn-outline-secondary btn-sm" id="playAudio">
                    <i class="fas fa-volume-up"></i> 播放
                </button>
            </div>
        </div>
    </div>

    <!-- 语音设置面板 -->
    <div class="card mt-3">
        <div class="card-header">
            语音设置
        </div>
        <div class="card-body">
            <div class="mb-3">
                <label class="form-label">语音音色</label>
                <select class="form-select" id="voiceType">
                    <option value="female1">女声1</option>
                    <option value="female2">女声2</option>
                    <option value="male1">男声1</option>
                    <option value="male2">男声2</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="form-label">语速调节</label>
                <input type="range" class="form-range" id="speechRate" min="0.5" max="2" step="0.1" value="1">
            </div>
        </div>
    </div>

    <!-- 蓝牙状态指示器 -->
    <div class="position-fixed bottom-0 end-0 m-3">
        <div class="bluetooth-status bluetooth-disconnected">
            <i class="fas fa-bluetooth-b me-2"></i>
            <span>蓝牙未连接</span>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const recordButton = document.getElementById('recordButton');
    const voiceStatus = document.getElementById('voiceStatus');
    const recognitionText = document.getElementById('recognitionText');
    const resultContainer = document.querySelector('.translation-result');
    let isRecording = false;

    // 语音识别API
    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
    recognition.continuous = true;
    recognition.interimResults = true;

    // 切换录音状态
    recordButton.addEventListener('click', () => {
        if (!isRecording) {
            startRecording();
        } else {
            stopRecording();
        }
    });

    // 开始录音
    function startRecording() {
        if (!isBluetoothConnected) {
            alert('请先连接蓝牙设备');
            return;
        }

        isRecording = true;
        recordButton.classList.add('btn-danger');
        recordButton.classList.remove('btn-primary');
        voiceStatus.textContent = '正在录音...';
        recognition.start();
    }

    // 停止录音
    function stopRecording() {
        isRecording = false;
        recordButton.classList.remove('btn-danger');
        recordButton.classList.add('btn-primary');
        voiceStatus.textContent = '点击麦克风开始录音';
        recognition.stop();
    }

    // 处理语音识别结果
    recognition.onresult = (event) => {
        const result = event.results[event.results.length - 1];
        const text = result[0].transcript;
        recognitionText.textContent = text;

        if (result.isFinal) {
            // 执行翻译
            translateText(text);
        }
    };

    // 翻译文本
    async function translateText(text) {
        // 这里添加翻译API调用
        console.log('翻译文本:', text);
        
        // 显示翻译结果（示例）
        resultContainer.style.display = 'block';
        resultContainer.querySelector('.result-text').textContent = '翻译结果示例';
    }

    // 错误处理
    recognition.onerror = (event) => {
        console.error('语音识别错误:', event.error);
        voiceStatus.textContent = '语音识别出错，请重试';
        stopRecording();
    };
});
</script> 